<template>
  <div class="con">
    <!-- 充值提现 -->
    <div class="contbox6_10">
      <p class="titlelist6_10">
        活动管理
        <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>商品购买返现
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form
            label-width="100px"
            :model="formInline"
            class="demo-form-inline"
          >
            <el-form-item label="机构ID" v-if="jurisdiction == 2">
              <el-input
                v-model="formInline.officeUid"
                placeholder="请输入机构ID"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构名称" v-if="jurisdiction == 2">
              <el-input
                v-model="formInline.officeName"
                placeholder="请输入机构名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号" v-if="jurisdiction == 2">
              <el-input
                v-model="formInline.phone"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="活动名称">
              <el-input
                v-model="formInline.activeName"
                placeholder="请输入活动名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="活动状态">
              <el-select
                v-model="formInline.status"
                clearable
                placeholder="请选择"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="启用" value="1"></el-option>
                <el-option label="停用" value="0"></el-option>
                <!-- <el-option label="已过期" value="2"></el-option>
                  <el-option label="已停用" value="3"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="活动时间">
              <el-date-picker
                v-model="dataTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <div class="boxer">
              <el-button type="primary" @click="queryProductActiveLists"
                >搜索</el-button
              >
              <el-button @click="reset">重置</el-button>
            </div>
          </el-form>
        </div>

        <div class="buttons" v-if="jurisdiction == 0">
          <el-button type="primary" @click="machines(1)" class="elbtn"
            >添加活动</el-button
          >
        </div>
        <el-table
          v-loading="listLoading"
          :data="tableData"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            align="center"
            min-width="40"
          ></el-table-column>
          <el-table-column
            prop="officeUid"
            align="center"
            min-width="250"
            label="机构ID"
            v-if="jurisdiction == 2"
          ></el-table-column>
          <el-table-column
            prop="officeName"
            align="center"
            min-width="200"
            label="OEM"
            v-if="jurisdiction == 2"
          ></el-table-column>
          <el-table-column
            prop="phone"
            align="center"
            min-width="120"
            label="手机号"
            v-if="jurisdiction == 2"
          ></el-table-column>
          <el-table-column
            prop="activeName"
            align="center"
            min-width="200"
            label="活动名称"
          ></el-table-column>
          <el-table-column
            prop="channelName"
            align="center"
            min-width="200"
            label="品牌"
          ></el-table-column>
          <!-- <el-table-column prop="productNo" align="center" min-width="200" label="型号"></el-table-column> -->
          <el-table-column align="center" min-width="300" label="有效期">
            <template slot-scope="scope">{{ scope.row.beginDate }} - {{ scope.row.endDate }}</template>
          </el-table-column>
          <el-table-column
            prop="rewardAmt"
            align="center"
            min-width="150"
            label="奖励金额（元）"
          ></el-table-column>
          <el-table-column
            prop="status"
            align="center"
            min-width="100"
            label="状态"
          >
            <template slot-scope="scope">
              {{ isDuringDate(scope.row) }}
              <!-- <span v-if="scope.row.status == 0">未上线</span>
                <span v-if="scope.row.status == 1">已上线</span>
                <span v-if="scope.row.status == 2">已过期</span>
                <span v-if="scope.row.status == 3">已停用</span> -->
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            min-width="250"
            label="操作"
          >
            <template slot-scope="scope">
              <!--OEM 可编辑  admin可查看规则-->
              <el-button
                type="text"
                @click="machines(2, scope.row.uid)"
                size="mini"
                v-if="jurisdiction == 0 && isAuth('recurrenceRule')"
                >编辑</el-button
              >
              <el-button
                type="text"
                @click="machines(3, scope.row.uid)"
                size="mini"
                v-if="jurisdiction == 2 && isAuth('recurrenceRule')"
                >规则</el-button
              >
              <el-button
                type="text"
                v-if="isAuth('recurrenceDetails')"
                @click="dataTypt(scope.row.uid)"
                size="mini"
                >详情</el-button
              >
              <el-button
                type="text"
                v-if="scope.row.status == 0 && isAuth('recurrenceDisabled')"
                @click="changeStatus(scope.row.uid, 0)"
                size="mini"
                >启用</el-button
              >
              <el-button
                type="text"
                style="color:#F56C6C"
                v-if="scope.row.status != 0 && isAuth('recurrenceDisabled')"
                @click="changeStatus(scope.row.uid, 1)"
                size="mini"
                >停用</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="productActiveExport" class="btnExport"
          >批量导出</el-button
        >
        <el-pagination
          background
          style="text-align: right;"
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.page"
          :page-size="formInline.number"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 30, 40, 50]"
          :total="totalNum"
        ></el-pagination>
      </div>
    </div>

    <!-- 查看活动详情 -->
    <ViewAactivities
      :viewShow="viewShow"
      :activeUid="activeUid"
      v-on="viewSuccess()"
    ></ViewAactivities>
    <!-- 添加/编辑活动 -->
    <!-- <addStandardActivity
      :standardShow="standardShow"
      :machinesType="machinesType"
      :activeUid="activeUid"
      v-on="standardSuccess()"
    ></addStandardActivity> -->
    <!-- <el-footer style="padding:0;">
      <footerbox></footerbox>
      </el-footer>-->
    <!-- </el-container>
    </el-container>-->
  </div>
</template>
<script>
import ViewAactivities from "./viewAactivities";
import addStandardActivity from "./addStandardActivity";
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import qs from "qs";
export default {
  data() {
    return {
      formInline: {
        activeName: "",
        status: "",
        startDate: "",
        endDate: "",
        oemUid: localStorage.getItem("uid"),
        page: 1,
        number: 20,
      },
      dataTime: [],
      fromType: false,
      activeUid: "",
      viewShow: false,
      standardShow: false,
      listLoading: false,
      machinesType: 0,
      totalNum: 0, //总页数
      tableData: [],
      multipleSelection: [],
      jurisdiction: "",
    };
  },
  components: {
    ViewAactivities,
    addStandardActivity,
  },
  mounted() {
    this.queryProductActiveList();
    this.jurisdiction = localStorage.getItem("jurisdiction"); //判断当前用户 0-OEM  2-admin
  },
  methods: {
     // 重置
    reset() {
      this.formInline.officeName = "";
      this.formInline.phone = "";
      this.formInline.activeName = "";
      this.formInline.status = "";
      this.formInline.oEMName = "";
      this.formInline.startDate = "";
      this.formInline.endDate = "";
      this.formInline.officeUid = "";
      this.mechanism = "";
      this.dataTime = [];
    },
    dataTypt(id) {
      this.activeUid = id;
      this.viewShow = true;
    },
    changeStatus(id, n) {
      if (n === 1) {
        this.$confirm(
          "停止活动后奖励将不再计算，操作立即生效, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            // type: "warning",
          }
        ).then(() => {
          this.changeStatusInterface(id, n);
        });
      } else {
        this.changeStatusInterface(id, n);
      }
    },
    changeStatusInterface(id, n) {
      if(n==0){
        n=1
      }else{
        n=0
      }
      this.listLoading = true;
      let parme = {
        uid: id,
        status: n,
      };
      https.changeActiveStatus(parme).then((res) => {
        if (res.data.code !== "0000") {
          this.$notify({ title: "错误", message: res.data.msg, type: "error" });
          this.listLoading = false;
          return;
        }
        this.queryProductActiveList();
        this.$notify({ title: "成功", message: res.data.msg, type: "success" });
        this.listLoading = false;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(111, this.multipleSelection);
    },
    queryProductActiveList() {
      if (this.fromType == true) return;
      this.fromType = true;
      this.listLoading = true;
      if (this.dataTime === null) this.dataTime = [];
      this.formInline.startDate = this.dataTime[0];
      this.formInline.endDate = this.dataTime[1];
      https.queryProductActiveList(this.formInline).then((res) => {
        if (res.data.code !== "0000") {
          this.$notify({ title: "错误", message: res.data.msg, type: "error" });
          this.listLoading = false;
          this.fromType = false;
          return;
        }
        this.tableData = res.data.data;
        this.totalNum = res.data.total;
        this.listLoading = false;
        this.fromType = false;
      });
    },
    isDuringDate(beginDateStr) {
      var curDate = new Date(),
          beginDate = new Date(beginDateStr.beginDate),
          endDate = new Date(beginDateStr.endDate);
      if (curDate >= beginDate && curDate <= endDate) {
          return "进行中";
      }else if(curDate<beginDate){
        return "未开始"
      }else if(curDate>endDate){
        return "已结束";
      }
    },
    machines(type, id) {
      this.machinesType = type;
      this.standardShow = true;
      id !== undefined && (this.activeUid = id);
      console.log(1111, type, this.standardShow);
    },
    productActiveExport() {
      // window.location.href =  `api/active/productActive/excel/export?${qs.stringify(this.formInline)}`;
      let that = this;
      that
        .axios({
          url: "api/active/productActive/excel/export",
          method: "POST",
          headers: { "Content-Type": "application/json;charset=utf-8" },
          data: that.formInline,
          responseType: "arraybuffer",
        })
        .then((res) => {
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          var link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          let date = new Date();
          link.download =
            "商品购买返现列表" +
            date.getFullYear() +
            (date.getMonth() < 10 ? "0" + date.getMonth() : date.getMonth()) +
            (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
            (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
            (date.getMinutes() < 10
              ? "0" + date.getMinutes()
              : date.getMinutes()) +
            (date.getSeconds() < 10
              ? "0" + date.getSeconds()
              : date.getSeconds());
          link.click();
        })
        .catch((e) => {
          that.$notify({
            title: "错误",
            message: "导出失败",
            type: "error",
          });
        });
    },
    onAdd() {},
    handleSizeChange(val) {
      this.formInline.number = val; //动态改变
      this.formInline.page = 1;
      this.queryProductActiveList();
    },
    queryProductActiveLists(){
      this.formInline.page = 1; //动态改变
      this.queryProductActiveList();
    },
    handleCurrentChange(val) {
      this.formInline.page = val; //动态改变
      this.queryProductActiveList();
    },
    auditShop() {},
    viewSuccess() {
      bus.$on("viewsuccess", (res) => {
        this.viewShow = res;
      });
    },
    standardSuccess(n) {
      bus.$on("standardSuccess", (res) => {
        this.standardShow = res.show;
        if (res.type === 1) this.queryProductActiveList();
      });
    },
  },
};
</script>
<style scoped>
.con {
  position: relative;
}
.elbtn {
  margin-left: 90%;
}
.img {
  display: block;
  width: 100%;
}
.money p {
  width: 100%;
  line-height: 30px;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
}
.color {
  color: #e6a23c;
}
.mt20 {
  margin-top: 20px;
}
.shopList {
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 80px;
  font-size: 16px;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 10px;
}
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn {
  float: right;
}
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.el-form--inline .el-form-item {
  margin-right: 0;
}
.btns .el-form-item__content {
  left: -1430px;
}
</style>
